<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./assets/lib/bootstrap/bootstrap.min.css">
  <link rel="stylesheet" href="./assets/lib/layui/css/layui.css">
  <link rel="stylesheet" href="./assets/iconfont/iconfont.css">
  <link rel="stylesheet" href="./assets/css/login.css">
</head>

<body>

  <div class="area">
    <div class="top">
      <img src="./assets/images/logo2.png" class="col-6" alt="">
      <h1>学员管理系统</h1>
    </div>
    <div class="row">
      <div class="left">
        <img src="./assets/images/slogan.png" alt="">
      </div>
      <div class="form-box">

        <!-- --------------------------------注册盒子 -->
        <div class="register box">
          <div class="container row header mb-4">
            <h2>欢迎注册</h2>
          </div>
          <form action="" class="container layui-form">
            <!-- 账号 -->
            <div class="row mb-4 form-group">
              <span class="iconfont icon-yonghu"></span>
              <input type="text" class="form-control" lay-verify="required|len2_15" name="username" autocomplete="off" />
            </div>
            <!-- 密码 -->
            <div class="row mb-4 form-group">
              <span class="iconfont icon-mima"></span>
              <input type="password" class="form-control" name="password" lay-verify="required|len6_15" />
            </div>
            <div class="row mb-4">
              <button type="submit" class="btn btn-primary" lay-submit>注册</button>
            </div>
            <div class="row mb-3">
              <a href="javascript:;">已有账号，去登录</a>
            </div>
          </form>
        </div>


        <!-- --------------------------------登录盒子 -->
        <div class="login box">
          <div class="container row header mb-4">
            <h2>欢迎登录</h2>
          </div>
          <form action="" class="container">
            <!-- 账号 -->
            <div class="row mb-4 form-group">
              <span class="iconfont icon-yonghu"></span>
              <input type="text" class="form-control" name="username" autocomplete="off" autofocus="autofocus" />
            </div>
            <!-- 密码 -->
            <div class="row mb-4 form-group">
              <span class="iconfont icon-mima"></span>
              <input type="password" class="form-control" name="password" />
            </div>
            <div class="row mb-4">
              <button type="submit" class="btn btn-primary">登录</button>
            </div>
            <div class="row mb-3">
              <a href="javascript:;">还没有账号，去注册</a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>


  <script src="./assets/lib/jquery-3.6.0.min.js"></script>
  <script src="./assets/lib/bootstrap/bootstrap.min.js"></script>
  <script src="./assets/lib/layui/layui.js"></script>
  <script src="./assets/lib/axios.js"></script>

  <script src="./assets/utils/request.js"></script>
  <script>
    layui.use(['layer', 'form'], function() {
      let form = layui.form;
      let layer = layui.layer;
      // ************************************************************************* 切换登录注册两个盒子
      $('.register a').on('click', function() {
        $('.register').hide().next().show();
      })

      $('.login a').on('click', function() {
        $('.login').hide().prev().show();
      })


      // *************************************************************************表单验证     
      form.verify({

        len2_15: function(value, item) { // value：表单的值、item：表单的DOM对象
          // 正则：
          let reg = /^\S{2,15}$/;
          // 验证不通过
          if (reg.test(value) == false) {
            // 语法：return 不通过的提示文字
            return "用户名长度不能小于2位或超过15位";
          }
        },
        len6_15: function(value, item) { // value：表单的值、item：表单的DOM对象
          // 正则：
          let reg = /^\S{6,15}$/;
          // 验证不通过
          if (reg.test(value) == false) {
            // 语法：return 不通过的提示文字
            return "密码长度不能小于6位或超过15位";
          }
        },

      });

      // *************************************************************************注册功能 

      $('.register form').on('submit', function(e) {
        e.preventDefault();
        // 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
        let data = $(this).serialize(); // serialize是jQuery方法，它可以根据表单各项的name属性获取值
        axios
          .post('/api/register', data)
          .then(({
            data: res
          }) => {
            if (res.code === 0) {
              // 表示注册成功
              // 提示
              layer.msg(res.message);


              // 清空输入框
              $('.register input').val('');

              // 切换到登录的盒子
              $('.register').hide().next().show();
            }
          })
      });


      // *************************************************************************登录功能     
      $('.login form').on('submit', function(e) {
        e.preventDefault();
        // 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
        let data = $(this).serialize(); // serialize是jQuery方法，它可以根据表单各项的name属性获取值

        axios
          .post('/api/login', data)
          .then(({
            data: res
          }) => {
            if (res.code === 0) {

              // 把服务器返回的 token，保存到本地存储
              localStorage.setItem('token', res.token);

              // 跳转到首页 index.html
              location.href = './index.html';
            }
          })
      });


    });
  </script>
</body>

</html>